﻿@import "variables.less";
@import "mixins.less";
//
// 进度条
//
// 进度条容器
.progress {
    position: relative;
    display: inline-block;
    width: @progress-width;
    height: @progress-height;
    padding: @progress-padding;
    background: @progress-bg;
    border-radius: @progress-border-radius;
    vertical-align: middle;
    overflow: hidden;
    .box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
    .clearfix;
    >span {
        position: absolute;
        right: -5px;
        top: 0;
        &.active {
            color: white;
        }
    }
}

// 进度条变化栏
.progress-bar {
    width: 0%;
    height: 100%;
    border-radius: @progress-bar-border-radius;
    background-color: @progress-bar-bg;
    .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
    .transition(width .6s ease);
}

// 条纹样式
.progress-striped>.progress-bar,
.progress-bar-striped {
    #gradient>.striped();
    background-size: 20px 20px;
}

// 激活一个动画
.progress.active>.progress-bar,
.progress-bar.active {
    .animation(progress-bar-stripes 2s linear infinite);
}

// 变化
.success {
    .progress-bar-variant(@progress-bar-success-bg);
}

.info {
    .progress-bar-variant(@progress-bar-info-bg);
}

.warning {
    .progress-bar-variant(@progress-bar-warning-bg);
}

.danger {
    .progress-bar-variant(@progress-bar-danger-bg);
}

// 动画
// 谷歌厂商
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

// IE10+ 厂商
@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}